<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Extra-Map-App</title>

    <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/library/4.7/esri/css/main.css">
    <link rel="stylesheet" href="css/mainApp.css">
    <link rel="stylesheet" href="../dist/css/dextra.css">
    <style>
        #testImg{
            transition: background-image 1s

        }
    </style>


    <script src="../dist/config.js"></script>
    <script src="../Vendor/echarts.js"></script>
    <script src="http://127.0.0.1/arcgis_js_api/library/4.7/init.js"></script>
    <script>

        /**
         * Created by Caihm on 2017/5/10.
         */

        var map;
        var view;
        var s;
        var test;
        var layer;

        require([

            "dojo/parser",
            "dojo/dom-class",
            "dojo/dom-construct",
            "dojo/on",
            'dojo/_base/lang',
            "esri/Map",
            "esri/views/MapView",
            // "esri/views/SceneView",
            "esri/request",
            "esri/geometry/Point",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/geometry/support/webMercatorUtils",
            'esri/Graphic',
            "esri/geometry/support/jsonUtils",
            "esri/symbols/SimpleFillSymbol",
            "esri/PopupTemplate",
            "dextra/layers/OverlayLayer","esri/geometry/Point",
            "dojo/domReady!"
        ], function (parser, domClass, domConstruct, on, lang, Map, MapView, esriRequest, Point, SimpleMarkerSymbol, SimpleFillSymbol, webMercatorUtils, Graphic, geometryUtils,SimpleFillSymbol,  PopupTemplate, DivLayer,Point) {
            parser.parse();
            var symbol = {
                type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                color: [ 51,51, 204, 0.3 ],
                style: "solid",
                size:12,
                outline: {  // autocasts as new SimpleLineSymbol()
                    color: "white",
                    width: 1
                }
            };

            var markerSymbol = {
                type: "simple-marker",  // autocasts as new SimpleFillSymbol()
                color: [ 51,51, 204, 0.3 ],
                style: "solid",
                outline: {  // autocasts as new SimpleLineSymbol()
                    color: "white",
                    width: 1
                }
            };
            // mapManager = MapManager.getInstance({     appConfig: appConfig },
            // 'mapishere'); mapManager.showMap();

            map = new Map({basemap: "streets"});
            view = new MapView({
                container: "viewDiv", // Reference to the scene div created in step 5
                map: map, // Reference to the map object created before the scene
                zoom: 4, // Sets zoom level based on level of detail (LOD)
                center: [15, 65]
            });

            view.when(function () {

                test = new DivLayer({
                    popupEnabled:true,
                });

                view .map .add(test);
                var img = domConstruct.create('div', {
                    id:"testImg",
                    style: 'height:256px;width:256px;background-image: url(img/blue.png)',
                   });


                view.graphics.add(new Graphic({
                    geometry: view.extent.center.clone(),
                    symbol:markerSymbol
                }))

                setTimeout(function(){
                    test.add({
                        html: img,
                        geometry: view.extent.center
                    });
                },2000)

                on(dojo.byId("testBtn"),"click",function(){
                    img.style="height:256px;width:256px;background-image: url(img/red.png)"
                })
//


            });



        });

      </script>



</head>
<body>
<!--<button id="testBtn">动画</button>-->
<div id="viewDiv"></div>
</body>
</html>